<template>
  <section class="wrap">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="80px"
      class="demo-ruleForm"
    >
      <h3>分类信息</h3>
      <el-divider></el-divider>
      <div class="form-item-wrap">
        <el-form-item label="分类名" prop="name">
          <el-input placeholder="请输入分类名" v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="分类描述" prop="description">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入分类描述"
            v-model="ruleForm.description"
          >
          </el-input>
        </el-form-item>
      </div>
      <el-divider></el-divider>
      <div class="form-item-wrap">
        <el-form-item label="状态">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="0">禁用</el-radio>
            <el-radio :label="1">启用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label-width="0" class="form-item-center">
          <el-button @click="resetForm('ruleForm')" style="margin-right: 20px"
            >重置</el-button
          >
          <el-button type="primary" @click="submitForm('ruleForm')">{{
            ruleForm.id ? "保存" : "创建"
          }}</el-button>
        </el-form-item>
      </div>
    </el-form>
  </section>
</template>

<script>
import { create, update, detail } from "@/api/category";

export default {
  name: "CategoryCreate",
  data() {
    return {
      ruleForm: {
        id: this.$route.query.id || undefined,
        name: "",
        description: "",
        status: 1,
      },
      rules: {
        name: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
        // description: [{ required: true, message: "请输入分类描述", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.ruleForm.id && this.getCategory();
  },
  methods: {
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if(this.ruleForm.id){
            this.updateCategory()
          }else{
            this.addCategory()
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 获取分类信息
    async getCategory() {
      try {
        const res = await detail({
          id: this.$route.query.id,
        });
        this.ruleForm = res.data;
        console.log(this.ruleForm);
        // this.ruleForm.name = res.data.name;
        // this.ruleForm.status = res.data.status
      } catch (err) {
        console.log(err);
      }
    },
    // 更新分类
    async updateCategory() {
      try {
        const res = await update(this.ruleForm);
        if (res.code === 200) {
          this.$msgbox
            .confirm("更新成功，是否退出更新分类页面", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "success",
            })
            .then(() => {
              this.$router.push("/category/index");
            });
        }
      } catch (err) {
        this.$message.error(err);
      }
    },
    // 创建分类
    addCategory(){
      create(this.ruleForm)
        .then(res => {
          console.log('res',res)
          if(res.code == 200){
            this.$router.push("/category/index")
          }
        })
        .catch(error => {
          console.log('error');
        })
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped lang="scss">
.wrap {
  box-sizing: border-box;
  margin: 24px;
  background-color: #fff;
}
.demo-ruleForm {
  padding: 30px 0;
  width: 70%;
  margin: 0 auto;
}
.form-item-wrap {
  width: 70%;
  margin: 0 auto;
  .form-item-center {
    display: flex;
    justify-content: space-between;
  }
}
</style>
